<template>
  <div>
    <el-row :gutter="10">
        <el-col :span="6">
            <el-card>
                <Detail title="总销售额" count="￥ 12340">
                    <template slot="charts">
                        <span> 周同比&nbsp;&nbsp;56.67%<i class="el-icon-caret-top" style="color: greenyellow"></i></span>
                        &nbsp;&nbsp;
                        <span> 日同比&nbsp;&nbsp;19.96%<i class="el-icon-caret-bottom" style="color: red"></i></span>
                    </template>
                    <template slot="footer">
                        <span>日销售额 ￥13244</span>   
                    </template>
                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail title="访问量" count="75634">
                    <template slot="charts">
                        <lineChart></lineChart>
                    </template>
                    <template slot="footer">
                        <span>日访问量 13244</span>   
                    </template>

                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail title="运营活动效果" count="45305">
                    <template slot="charts">
                        <barChart></barChart>
                    </template>
                    <template slot="footer">
                        <span>转化率 65%</span>   
                    </template>
                </Detail>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <Detail title="支付笔数" count="43%">
                    <template slot="charts">
                        <progressChart></progressChart>
                    </template>
                    <template slot="footer">
                        <span> 周同比&nbsp;&nbsp;56.67%<i class="el-icon-caret-top" style="color: greenyellow"></i></span>
                        &nbsp;&nbsp;
                        <span> 日同比&nbsp;&nbsp;19.96%<i class="el-icon-caret-bottom" style="color: red"></i></span>
                    </template>
                </Detail>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail';
import lineChart from './lineChart';
import barChart from './barChart';
import progressChart from './progressChart';
export default {
    name:"",
    components:{
        Detail,
        lineChart,
        barChart,
        progressChart,
    }
}
</script>

<style>

</style>